<template>
	<view class="layout">
		<u-navbar :title="params.collection"></u-navbar>
		<scroll-view class="scroll-view-box goods-list" scroll-y>
			<view @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in goodsData"
				:key="item_index">
				<u-image class="goods-img" :src="item.bannerUrl" border-radius="8rpx 0 0 8rpx" mode="aspectFill"
					width="162rpx" height="240rpx">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<view class="goods-desc">
					<view class="goods-title">
						{{ item.goodsName }}
					</view>
					<view class="goods-detail">
						<view>{{ item.detail}}</view>
					</view>
					<view class="goods-actions">
						<view class="tags">
							<u-tag class="mytag" v-for="(tag,tagIndex) in (item.tags)" :text="tag" mode="dark"
								:bg-color="tagColors[0].bgColor" :color="tagColors[0].color" :key="tagIndex" />
						</view>
						<view class="actions">
							<view class="yuyue-box" v-if="(item_index%2)==0">
								<view class="dateBtn">
									02/14
								</view>
								<view class="stateBtn">
									已预约
								</view>
							</view>
							<u-button v-else @click="openGameLink(item)" :custom-style="actionBtnStyle">进入</u-button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-loadmore bg-color="transparent" style="padding:40rpx 0" :status="status" @loadmore="getGoodsFun()"
			icon-type="iconType" />
	</view>
</template>
<script>
	import {
		getCollectionGoodsPageList
	} from "@/api/goods.js";
	import * as API_Trade from "@/api/trade";

	import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
	import {
		throttle
	} from "@/utils/tools.js"
	import {
		getOrderDetailByGoodsId
	} from "@/api/order.js"
	export default {
		title: "合集数据",
		components: {
	
		},
		data() {
			return {
				routerVal: '',
				tagColors: [{
						color: '#4C4141',
						bgColor: '#EDEDED'
					},
					{
						color: '#E11E7E',
						bgColor: '#FAF0F4'
					}
				],
				actionBtnStyle: {
					'width': '76rpx',
					'height': '44rpx',
					'background': '#1CBCD0',
					'border': 'none',
					'font-size': '22rpx',
					'font-family': 'PingFangSC, PingFang SC',
					'font-weight': '600',
					'color': '#FFFFFF'
				},
				status: 'nomore',
				params: {
					pageNumber: 1,
					pageSize: 10,
					collection: "",
				},
				goodsData: [],
			};
		},
		props: [],
		watch: {},
		mounted() {},
		async onLoad(options) {
			if (options.collection) {
				this.params.collection = options.collection
				setTimeout(() => {
					this.initGoods();
				}, 0);
			} else {
				this.$u.toast("未检测到集合名称")
			}
		},
		/**
		 * 触底加载
		 */
		onReachBottom() {
			this.getGoodsFun()
		},
		destroyed() {
			uni.$off('onReachBottom')
		},
		methods: {
			// 打开游戏链接
			openGameLink(item) {
				// console.log(item,'打开游戏链接----')
				// getOrderDetailByGoodsId(item.id).then(res => {
				// 	let result = res.data.result
				// 	if (!result) {
				// 		this.createTradeFun(item)
				// 	} else {
				// 		if (result.orderStatus === 'PAID') {
				// 			uni.navigateTo({
				// 				url: "/pages/tabbar/home/web-view?src=" + item.link,
				// 			});
				// 		} else {
				// 			this.pay(result.sn)
				// 		}

				// 	}

				// })
				uni.navigateTo({
					url: `/pages/game/home/index?goodsId=${item.id}`,
				});
			},
			// 创建订单
			createTradeFun(item) {
				// 防抖
				throttle(() => {
					//  创建订单
					let client;
					// #ifdef H5
					client = "H5";
					// #endif
					// #ifdef MP-WEIXIN 
					client = "WECHAT_MP";
					// #endif
					// #ifdef APP-PLUS
					client = "APP";
					// #endif

					let submit = {
						client,
						way: 'VIRTUAL', //立即购买
						remark: [],
						parentOrderSn: "",
						goodsId: item.id //商品ID
					};
					/**
					 * 创建订单
					 */
					API_Trade.createTrade(submit).then((res) => {

						if (res.data.success) {
							uni.showToast({
								title: "创建订单成功!",
								duration: 2000,
								icon: "none",
							});

							this.pay(res.data.result.sn)

						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "none",
							});
						}
					});
				}, this, 3000);
			},
			/**
			 * 微信小程序中直接支付
			 */
			async pay(sn) {

				// #ifdef MP-WEIXIN
				// 微信小程序中点击创建订单直接开始支付
				new LiLiWXPay({
					sn: sn,
					price: 1,
				}).pay();
				// #endif

				// #ifndef MP-WEIXIN
				this.navigateTo(
					`/pages/cart/payment/payOrder?trade_sn=${sn}`
				);
				// #endif
			},
			handleClick(detail) {
				// 进入游戏首页,根据游戏id获取首页详情
				uni.navigateTo({
					url: `/pages/game/home/index?goodsId=${detail.id}`,
				});
			},
			async initGoods() {
				this.goodsData = []
				const res = await getCollectionGoodsPageList(this.params);
				if (res.data.success) {
					const resData = res.data.result.records
					let resultData = this.getResultData(resData)
					this.goodsData.push(...resultData);
				}
			},
			/**
			 * @desc 解析商品JSON数据
			 */
			getResultData(data = []) {
				let result = data.map(option => {
					if (!option.sellingPoint) return option
					try {
						return {
							...option,
							...JSON.parse(option.sellingPoint)
						}
					} catch {
						this.$u.toast(`数据解析失败，请检查【${option.goodsName}】数据格式`);
					}
				})

				return result.sort(this.compare)
			},
			/**
			 * @desc 根据weight权重字段排序 值越大越靠前
			 * @param {Object} a
			 * @param {Object} b
			 */
			compare(a, b) {
				if (!a.weight && !b.weight) {
					return 0; // 如果两者都没有weight，则认为它们相等
				}
				if (!a.weight) {
					return 1; // 如果a没有weight，认为它大于b
				}
				if (!b.weight) {
					return -1; // 如果b没有weight，认为它小于a
				}
				return b.weight - a.weight; // 否则，根据weight值进行比较,值越大越靠前
			},
			getGoodsFun() {
				this.status = 'loading';
				this.params.pageNumber++
				getCollectionGoodsPageList(this.params).then((res) => {
					const resData = res.data.result.records
					let resultData = this.getResultData(resData)
					if (
						resultData == [] ||
						resultData == "" ||
						resultData == null
					) {
						this.status = "noMore";
						return false;
					}
					this.goodsData.push(...resultData);
					this.status = "loadmore";
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.layout {
		.goods-list {
			padding: 70rpx 44rpx 44rpx 44rpx;
			width: auto;

			.goods-item {
				width: 100%;
				height: 240rpx;
				display: flex;
				// justify-content: space-between;
				margin-bottom: 16rpx;

				.goods-img {}

				.goods-desc {
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100vw - 250rpx);
					border-radius: 0 8rpx 8rpx 0;
					padding: 24rpx;

					.goods-title {
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #181818;
					}

					.goods-detail {
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 300;
						color: #979797;

						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box; // 弹性伸缩盒
						-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
						-webkit-line-clamp: 2;

					}

					.goods-actions {
						display: flex;
						justify-content: space-between;

						.yuyue-box {
							display: flex;
							align-items: center;
							padding: 1px;

							.dateBtn {
								// width: 76rpx;
								height: 44rpx;
								border-radius: 8rpx 0rpx 0rpx 8rpx;
								border: 1rpx solid $light-color;

								font-size: 28rpx;
								font-family: DINAlternate, DINAlternate;
								font-weight: bold;
								color: $light-color;

								display: flex;
								align-items: center;
								padding: 8rpx;
								// overflow: visible;
								box-sizing: border-box;
							}

							.stateBtn {
								// width: 76rpx;
								height: 44rpx;
								background: $light-color;
								border-radius: 0rpx 8rpx 8rpx 0rpx;
								border: 1rpx solid $light-color;

								font-size: 22rpx;
								font-family: PingFangSC, PingFang SC;
								// font-weight: 600;
								color: #FFFFFF;

								padding: 8rpx;
								box-sizing: border-box;
								display: flex;
								align-items: center;
							}
						}

						.tags {
							display: flex;
							align-items: center;

							.mytag {
								margin-right: 8rpx;
							}
						}

						.actions {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>